<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body,
			ul,
			li {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.list-body li:nth-child(even) {
				background: yellow;
			}
			.list-body li:nth-child(odd) {
				background: #fff;
			}
			.list-body li:hover {
				background: green;
			}
			.list-body li.checkedColor {
				background: green;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="css/baidu.css" />
		<script src="../src/vue.js"></script>
	</head>

	<body>
		<div class="wrap" id="app">
			歌手：<input  />
			歌曲：<input  />
			专辑数量：<input  />
			<div class="baidu">
				<ul class="list list-head">
					<li>
						<div>
							<input type="checkbox" v-model="isCheckedAll" />全选
						</div>
						<span>歌单</span>
						<span>歌手</span>
						<span>专辑</span>
					</li>
				</ul>
				<ul class="list list-body">
					<!--class="checkedColor"-->
					<li 
						v-for="item in list" 
						:class="{checkedColor: item.checked}"
					>
						<div>
							<input v-model="item.checked" type="checkbox">
						</div>
						<span>{{item.song}}</span>
						<span>{{item.name}}</span>
						<span>{{item.album}}</span>
					</li>
				</ul>
				<div class="select">
					<span class="selectAll">

						<span>统计：</span>
					</span>
					<div class="others">
						<span><em></em>歌手有：{{list.length}}位</span>
						<span><em></em>专辑有{{albums}}张</span>
					</div>
				</div>
			</div>
		</div>
		<script>
			let data = [
				{
					id:Date.now()+Math.random(),
					name: '邓紫棋',
					song: '泡沫',
					checked: true,
					album: 10
				},
				{
					id:Date.now()+Math.random(),
					name: '王杰',
					song: '泡沫',
					checked: true,
					album: 10
				},
				{
					id:Date.now()+Math.random(),
					name: '周杰伦',
					song: '菊花台',
					checked: true,
					album: 10
				}
			];

			let vm = new Vue({
				el: '#app',
				data: {
					list: data
				},
				computed: {
					/*
						定义一个属性，对应的函数，是在取值的时候触发的 getter

						手动的写上setter，写set函数
					*/
					isCheckedAll: {
						get() {
							console.log('取值了');
							return this.list.every(item => item.checked)
						},
						set(newValue){
							console.log(newValue);
							this.list.forEach(item => item.checked = newValue)
						}
					},
					albums(){
						return this.list.reduce((item1,item2) => {
							return {
								n: item1.n + item2.album
							}
						},{n:0})['n'];
					}
				}
			});


		</script>
	</body>

</html>
